extends ./chrome.jade

block content
  style.
    .ui-app-loading {
      width: 33.3%;
      margin: 60px auto;
      padding: 0 15px;
      text-align: center;
      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #444444;
      padding-top: 45px;
      background-size: 128px;
      background-position: top center;
      background-repeat: no-repeat;
      background-image: url('data:image/gif;base64,#{loadingGif}');
    }

    .ui-app-loading small {
      font-size: 65%;
      font-weight: 400;
      color: #b4bcc2;
    }


  div.ui-app-loading
    h1
      strong Kibana
      small.
        &nbsp;is loading. Give me a moment here. I'm loading a whole bunch of code. Don't worry, all this good stuff will be cached up for next time!

  script.
    window.onload = function () {

      var hideLoadingMessage = /#.*[?&]embed(&|$)/.test(window.location.href);
      if (hideLoadingMessage) {
        var loading = document.querySelector('.ui-app-loading h1');
        loading.removeChild(loading.lastChild);
      }

      var buildNum = #{kibanaPayload.buildNum};
      var cacheParam = buildNum ? '?v=' + buildNum : '';
      function bundleFile(filename) {
        var anchor = document.createElement('a');
        anchor.setAttribute('href', !{JSON.stringify(bundlePath)} + '/' + filename + cacheParam);
        return anchor.href;
      }
      var files = [
        bundleFile('commons.style.css'),
        bundleFile('#{app.id}.style.css'),
        bundleFile('commons.bundle.js'),
        bundleFile('#{app.id}.bundle.js')
      ];

      (function next() {
        var file = files.shift();
        if (!file) return;

        var failure = function () {
          // make subsequent calls to failure() noop
          failure = function () {};

          var err = document.createElement('h1');
          err.style['color'] = 'white';
          err.style['font-family'] = 'monospace';
          err.style['text-align'] = 'center';
          err.style['background'] = '#F44336';
          err.style['padding'] = '25px';
          err.innerText = 'Kibana did not load properly. Check the server output for more information.';

          document.body.innerHTML = err.outerHTML;
        }

        var type = /\.js(\?.+)?$/.test(file) ? 'script' : 'link';
        var dom = document.createElement(type);
        dom.setAttribute('async', '');
        dom.addEventListener('error', failure);

        if (type === 'script') {
          dom.setAttribute('src', file);
          dom.addEventListener('load', next);
          document.head.appendChild(dom);
        } else {
          dom.setAttribute('rel', 'stylesheet');
          dom.setAttribute('href', file);
          document.head.appendChild(dom);
          next();
        }
      }());
    };
